<template>
  <div class="app-container">
    <el-dialog title="信息详情" :visible.sync="previewVisible" width="1200px" top="10px" :close-on-click-modal="false" :close-on-press-escape="false">
      <table width="100%" border="0" cellpadding="15" cellspacing="1" class="inputtable">
        <tr>
          <td width="120" align="center" valign="top" bgcolor="#F9FBFB"><strong>信息类别</strong></td>
          <td valign="top" bgcolor="#FFFFFF">
            {{ infoClassName(detail.classId) }}
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>姓名</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ detail.realname }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>身份证号</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ detail.idcard }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>内容</strong></td>
          <td valign="top" bgcolor="#FFFFFF" style="word-wrap:break-word; word-spacing:normal;">
            <div id="pre_content" style="word-wrap:break-word; word-spacing:normal;">
              <div>{{ detail.alltext }}</div>
              <div>字数：{{ detail.textnum }}</div></div>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>加黑提前</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ showTextB(detail.textb) }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>刊登期数</strong></td>
          <td valign="top" bgcolor="#FFFFFF" style="word-wrap:break-word; word-spacing:normal;">
            <div id="pre_vol" style="word-wrap:break-word; word-spacing:normal;">{{ detail.vols }}</div>
            <div>共 {{ detail.volnum }} 期
              <span v-if="!detail.week1||!detail.week3||!detail.week5"> 只登 <span v-if="detail.week1">周一</span> <span v-if="detail.week3">周三</span> <span v-if="detail.week5">周五</span> </span>
            </div>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>微信小程序</strong></td>
          <td valign="top" bgcolor="#FFFFFF" style="word-wrap:break-word; word-spacing:normal;">
            <!-- <div v-if="detail.weixin">同步刊登至微信小程序 <span v-if="detail.wxTopDays">置顶 {{ detail.wxTopDays }} 天</span></div> -->
            <div>
              刊登 {{ detail.wxNum }} 天
              <span v-if="detail.wxWeeksText">（只登{{ detail.wxWeeksText }}）</span>
            </div>
            <div>
              置顶 {{ detail.wxTopDays }} 天
            </div>
          </td>
        </tr>
        <tr v-if="detail.wxUser">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>小程序用户</strong></td>
          <td style="vertical-align: top" bgcolor="#FFFFFF">
            <el-image
              style="width: 50px; height: 50px;margin-right:10px;"
              :src="detail.wxUser.avatarUrl"
              fit="fill"
              :preview-src-list="[detail.wxUser.avatarUrl]"
            />
            <div>{{ detail.wxUser.nickname }}</div>
          </td>
        </tr>
        <tr v-if="detail.wxUser&&detail.status">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>商户订单号</strong></td>
          <td bgcolor="#FFFFFF">{{ detail.outTradeNo }}</td>
        </tr>
        <tr v-if="detail.wxUser&&detail.status">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>微信支付单号</strong></td>
          <td bgcolor="#FFFFFF">{{ detail.transactionId }}</td>
        </tr>
        <tr v-if="detail.files&&detail.files.length>0">
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>图片</strong></td>
          <td valign="top" bgcolor="#FFFFFF">
            <div
              v-for="it in detail.files"
              :key="it.id"
              style="float:left"
            >
              <el-image
                style="width: 100px; height: 100px;margin-right:10px;"
                :src="$http.defaults.baseURL + 'api/mpfile/download?id=' + it.id"
                fit="fill"
                :preview-src-list="detail.files.map(file => $http.defaults.baseURL + 'api/mpfile/download?id=' + file.id)"
              />
            </div>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>备注</strong></td>
          <td valign="top" bgcolor="#FFFFFF">{{ detail.remark }}</td>
        </tr>
        <tr>
          <td align="center" valign="top" bgcolor="#F9FBFB"><strong>提示信息</strong></td>
          <td valign="top" bgcolor="#FFFFFF"><span id="pre_message" />&nbsp;<span v-if="detail.textnum>limitTextNum">超{{ detail.textnum - limitTextNum }}字</span><span v-if="detail.status===8">&nbsp;删除原因：{{ detail.delermarks }}</span>&nbsp;共{{ detail.price }}元<span v-if="detail.memberCard">（使用会员卡）</span></td>
        </tr>
      </table>
    </el-dialog>

    <div class="filter-container">
      <div style="margin:5px;">
        <span style="margin-right:20px">生成时间：{{ bill.createTime }}</span>
        <span style="margin-right:20px">信息条数：{{ bill.infoNum }}</span>
        <span style="margin-right:20px">总金额：{{ bill.allPrice }}</span>
        <span style="margin-right:20px">登报金额：{{ bill.paperPrice }}</span>
        <span style="margin-right:20px">登小程序金额：{{ bill.xcxPrice }}</span>

        <!-- <el-button class="filter-item" icon="el-icon-back" style="float:right" @click="backList">
          返回
        </el-button> -->
      </div>
    </div>
    <template>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <!-- <el-table-column v-if="roleEdit" type="selection" width="50" align="center" /> -->
        <el-table-column align="center" prop="id" label="信息编号" width="80px" />
        <el-table-column align="center" prop="realname" label="姓名" width="70px" />
        <el-table-column align="center" prop="phone" label="电话" width="110px" />

        <el-table-column width="190px" prop="classId" label="信息分类">
          <template slot-scope="scope">
            {{ infoClassName(scope.row.classId) }}
          </template>
        </el-table-column>

        <el-table-column width="160px" prop="adddate" align="center" label="录入时间" />
        <el-table-column width="160px" prop="paytime" align="center" label="支付时间" />
        <el-table-column width="70px" prop="status" align="center" label="状态">
          <template slot-scope="scope">
            {{ statusList.find(item=>item.value==scope.row.status)?statusList.find(item=>item.value===scope.row.status).label:scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column width="50px" prop="volnum" align="center" label="期数" />
        <el-table-column align="center" label="金额">
          <el-table-column width="70px" prop="price" align="center" label="总金额" />
          <el-table-column width="80px" prop="pricePaper" align="center" label="登报金额" />
          <el-table-column width="80px" prop="priceXcx" align="center" label="登小程序金额" />
        </el-table-column>
        <el-table-column align="center" label="小程序天数">
          <el-table-column width="60px" prop="wxNum" align="center" label="刊登天数" />
          <el-table-column width="60px" prop="wxTopDays" align="center" label="置顶天数" />
        </el-table-column>
        <el-table-column width="180px" prop="outTradeNo" align="center" label="商户订单号" />
        <el-table-column width="250px" prop="transactionId" align="center" label="微信支付单号" />
        <el-table-column label="" min-width="40">
          <template slot-scope="scope">
            <el-button size="small" type="text" icon="el-icon-search" @click="detailShow(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>

export default {
  name: 'ArticleList',
  data() {
    return {
      bill: {},
      removeId: 0,
      removeVisible: false,
      delermarks: '',
      limitTextNum: 65,
      loading: false,
      detail: {
        id: null,
        classId: null,
        realname: '',
        idcard: '',
        alltext: '',
        textNum: 0,
        textb: 0,
        vols: '',
        volnum: 0,
        remark: ''
      },
      previewVisible: false,
      statusList: [{ value: 0, label: '待支付' }, { value: 1, label: '未校对' }, { value: 3, label: '已校对' }, { value: 4, label: '已拒绝' }, { value: 8, label: '已删除' }],
      infoClassList: [],
      unitName: '',
      roleName: '',
      cfajbh: '',
      showStep: [],
      showAddBtn: false,
      roleEdit: true,
      selection: false,
      dicListLoading: false,
      stopDicLoading: false,
      startDicLoading: false,
      submitLoading: false,
      classList: [],
      classForm: {
        parentClass: 14,
        label: ''
      },
      diclist: [],
      settingVisible: false,
      item: {},
      dialogtitle: '',
      dialogVisible: false,
      allDialogVisible: false,
      readOnly: false,
      timestamp: '',
      list: [
      ],
      list2: [],
      list3: [],
      total: 0,
      listLoading: true,
      listQuery: {
        realname: '',
        phone: '',
        status: null,
        id: null,
        key: '',
        idcard: '',
        infoClass: null,
        source: null,
        page: 1,
        limit: 20
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: '',
      step: '',
      showThansferBtn: false,
      knowledgeVisible: false

    }
  },
  watch: {
    isEdit: {
      handler(val) {
        console.log('isEdit:' + val)
        this.roleEdit = val
      },
      immediate: true
    },
    isSelection: {
      handler(val) {
        console.log('isSelection:' + val)
        this.selection = val
      },
      immediate: true
    }
  },
  mounted() {
    this.getInfoClass()
    this.getDetail()
  },
  created() {
  },
  methods: {
    backList() {
      this.$router.push({ name: 'bill' })
    },
    detailShow(id) {
      this.$http
        .get('/api/busInfo/getById?id=' + id)
        .then(response => {
          if (response.data.success === true) {
            this.detail = response.data.result
            const wxWeeksArr = []
            if (this.detail.wxWeek1) {
              wxWeeksArr.push('周一')
            }
            if (this.detail.wxWeek2) {
              wxWeeksArr.push('周二')
            }
            if (this.detail.wxWeek3) {
              wxWeeksArr.push('周三')
            }
            if (this.detail.wxWeek4) {
              wxWeeksArr.push('周四')
            }
            if (this.detail.wxWeek5) {
              wxWeeksArr.push('周五')
            }
            if (this.detail.wxWeek6) {
              wxWeeksArr.push('周六')
            }
            if (this.detail.wxWeek7) {
              wxWeeksArr.push('周日')
            }
            this.detail.wxWeeksText = wxWeeksArr.length !== 7 ? wxWeeksArr.join('、') : ''
            let alltext = this.detail.title + ':' + this.detail.content
            if (this.detail.phone) {
              alltext = alltext + '。电话：' + this.detail.phone
            }
            if (this.detail.phone2) {
              alltext = alltext + ' ' + this.detail.phone2
            }
            this.detail.alltext = alltext
            this.detail.vols = this.detail.volList.map(item => {
              const year = new Date(item.pubdate).getFullYear()
              const nowYear = new Date().getFullYear()
              if (year !== nowYear) {
                return (year - 2000) * 1000 + parseInt(item.name)
              } else {
                return item.name
              }
            }).join(',')
            this.previewVisible = true
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    showTextB(val) {
      if (this.detail.classId === 70) {
        switch (val) {
          case 2:
            return '标下'
          case 3:
            return '标头'
        }
      } else {
        switch (val) {
          case 0:
            return '普通'
          case 1:
            return '加黑'
          case 2:
            return '提前'
          case 3:
            return '加黑+提前'
        }
      }
    },
    infoClassName(id) {
      let classname = ''
      this.infoClassList.forEach(item => {
        item.children.forEach(it => {
          if (it.id === id) {
            classname = item.classname + ' > ' + it.classname
          }
        })
      })
      return classname
    },
    getInfoClass() {
      this.$http
        .get('/api/busInfoClass/getLevelList')
        .then(response => {
          if (response.data.success === true) {
            this.infoClassList = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getDetail() {
      this.listLoading = true
      this.$http
        .get('/api/busBill/getById?id=' + this.$route.query.id)
        .then(response => {
          if (response.data.success === true) {
            this.bill = response.data.result
            this.$http
              .get('/api/busBill/getBillDetailList?id=' + this.$route.query.id)
              .then(response => {
                this.listLoading = false
                if (response.data.success === true) {
                  this.list = response.data.result
                } else {
                  console.log('获取失败:' + response.data.message)
                  this.$message({
                    message: '获取失败:' + response.data.message,
                    type: 'error'
                  })
                }
              })
              .catch(error => {
                console.log(error)
                this.listLoading = false
              })
          } else {
            this.listLoading = false
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
<style>
.inputtable{
  background:#ccc;
  line-height: 150%;
}
</style>
